import React, { Component } from 'react'
import { Carousel, WingBlank } from 'antd-mobile';
export default class CateListCarousel extends Component {
  state = {
    carouselList: [],
  }
  componentDidMount() {
  }
  componentWillReceiveProps(props){
    this.setState({
      /* 轮播图列表 */
      carouselList: props.CarouselList
    })
  }
  render() {
    return (
      !this.state.carouselList.length ? <div className="CateListCarouselWarp"></div>:(<WingBlank>
        <Carousel
          autoplay={true}
          infinite
          dotStyle={{
            background: ' #fff',
            opacity: ' .4',
          }}
          dotActiveStyle={{
            background: ' #fff',
            opacity: this.state.carouselList.length>1?'1':'0',
          }}
        >
          {this.state.carouselList.map(val => (
            <a
              key={val}
              href={val.targetUrl.url}
              style={{ display: 'inline-block', width: '100%', height: '1.1rem' }}
            >
              <img
                src={val.picUrl}
                alt=""
                style={{ width: '100%', verticalAlign: 'top',marginTop:'10px' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>)
    )
  }
}
